<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>续费</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="./static/css/base.css" rel="stylesheet">
    <script src="./static/js/jquery.min.1.10.2.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <section class="mian">
        <div class="renewal">
            <div>
                <p class="rent">租金：<span>¥988元</span>/月</p>
                <p class="chooseQuantity">请选择购买数量</p>
                <div class="add_less">
                    <span class="less"><img src="./static/images/less.png" alt=""></span>
                    <span class="total">1</span>
                    <span class="add"><img src="./static/images/add.png" alt=""></span>
                </div>
            </div>
            <div class="hr"></div>
            <div class="totalPrice">合计 <span>988</span>元</div>
            <div class="confirm">确定</div>
        </div>
    </section>
    <script type="text/javascript" charset="utf-8" async defer>
    (function() {
        var frame = function() {
            var pane = $.extend(true, {}, Pane)
            var api = $.extend(true, {}, API)
            var model = $.extend(true, {}, Model)
            pane.api = api
            pane.model = model
            pane.init()
        }
        var Pane = {
            init() {
                this.domflag = false;
                this.initbody();
                this.bindEvents();
            },
            initbody() {
                // let data = this.api.getList();
                let that = this;
                let dom = ` `
                // $(".note").empty();
                // $(".note").append(dom);
            },
            bindEvents() {
                $(".renewal")
                    .on('click', '.less', () => {
                        $(".total").text() > 1 ? $(".total").text(parseInt($(".total").text() - 1)) : $(".total").text(1);
                        $(".totalPrice span").text($(".total").text() * $(".rent span").text().replace(/[^0-9]/ig, ""))
                    })
                    .on('click', '.add', () => {
                        $(".total").text(parseInt($(".total").text()) + 1)
                        $(".totalPrice span").text($(".total").text() * $(".rent span").text().replace(/[^0-9]/ig, ""))
                    })
                    .on('click', '.confirm', ({ currentTarget, target }) => {
                        console.log("续费")
                    })
            }
        };
        var API = {
            getList() {

            }
        };
        var Model = {
            data: [],

        };
        return frame();
    }())
    </script>
    <style type="text/css" media="screen">
    .mian {
        width: 100%;
        height: 100%;
        background-color: #FAFAFC;
        padding: 0.3rem;
    }

    .renewal {
        width: 100%;
        height: 8rem;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 0.1rem;
        padding: 0.6rem 0.3rem;
        position: relative;
    }

    .rent {
        width: 100%;
        font-size: 0.36rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
    }

    .rent span {
        color: #FFA70D;
    }

    .chooseQuantity {
        margin-top: 0.7rem;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
    }

    .add_less {
        width: 1.94rem;
        height: 0.44rem;
        position: absolute;
        top: 1.73rem;
        left: 4.78rem;
    }

    .less {
        display: inline-block;
        width: 0.44rem;
        height: 0.44rem;
        position: absolute;
        top: 0;
    }

    .add {
        display: inline-block;
        width: 0.44rem;
        height: 0.44rem;
        position: absolute;
        top: 0;
        left: 1.4rem;
    }

    .total {
        display: inline-block;
        width: 0.96rem;
        height: 0.44rem;
        text-align: center;
        font-size: 0.36rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        position: absolute;
        top: 0;
        left: 0.44rem;
    }

    .renewal .hr {
        width: 100%;
        height: 0.01rem;
        background-color: #E5E5E5;
        margin-top: 1.28rem;
        margin-bottom: 0.65rem;
    }

    .totalPrice {
        width: 100%;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 0.45rem;
    }

    .confirm {
        width: 6.33rem;
        height: 0.88rem;
        text-align: center;
        line-height: 0.88rem;
        background: rgba(61, 125, 255, 1);
        border: 0.01rem solid rgba(180, 180, 180, 1);
        border-radius: 0.1rem;
        font-size: 0.32rem;
        color: rgba(255, 255, 255, 1);
    }
    </style>
</body>

</html>